<template>
  <MaskView>
    <div class="dialog">
      <div class="content">
        <div class="goods">
          <div class="title">
            <img :src="guageImg" preview>
          </div>
          <div class="desc">
            <h3>{{ detail.title }}</h3>
            <h5>{{ this.guagePrice | money }}</h5>
          </div>
        </div>
        <div class="guage">
          <h2 class="title">规格</h2>
          <p class="stock">库存：{{ guageStock ? guageStock : totalStock }}</p>
          <GuageList :guageList="detail.guageList" @pickGuage="pickGuage"></GuageList>
        </div>
        <div class="count">
          <div class="title">数量</div>
          <div class="ctrl">
            <CountCtrl :count="guageCount" :maxCount="guageStock ? Number(guageStock) : Number(totalStock)" @change="changeCount"></CountCtrl>
          </div>
        </div>
        <div class="btnWrapper">
          <div>
            <button class="shopcart" @click="shopcartAdd">加入购物车</button>
          </div>
          <div>
            <button class="buy" @click="buy">立刻购买</button>
          </div>
        </div>
      </div>
      <div class="close-wrapper">
        <span @click="close">X</span>
      </div>
    </div>
  </MaskView>
</template>

<script>
  import _ from 'lodash'
  import MaskView from '@/components/mask/Mask.vue'
  import CountCtrl from '@/components/countCtrl/CountCtrl.vue'
  import GuageList from '@/components/guageList/GuageList.vue'
  import { mapState } from 'vuex'
  export default {
    name: 'GoodsDialog',
    components: {
      MaskView,
      CountCtrl,
      GuageList
    },
    props: {
      data: Object
    },
    data() {
      return {
        detail: this.data,
        guageStock: this.data.guageList.length > 1 ? null : this.data.guageList[0].stock,
        guageCount: 1,
        guageName: this.data.guageList.length > 1 ? null : this.data.guageList[0].name,
        guagePrice: this.data.guageList[0].price,
        guageId: this.data.guageList.length > 1 ? '' : this.data.guageList[0].id,
        guageImg: this.data.guageList.length > 1 ? this.data.url : this.data.guageList[0].url,
        cartList: []
      }
    },
    watch: {
      data: {
        deep: true,
        immediate: true,
        handler(val) {
          this.detail = val
        }
      }
    },
    computed: {
      ...mapState(['openId', 'userState']),
      totalStock() {
        let stock = 0
        this.data.guageList.forEach(item => {
          stock += Number(item.stock)
        })
        return stock
      },
      apiUrl() {
        return this.userState == 0 ? '/v1/merchant/purchase' : '/v1/platform/purchase'
      }
    },
    methods: {
      pickGuage(guage) {
        this.guageId = guage.id
        this.guageName = guage.name
        this.guageStock = Number(guage.stock)
        this.guagePrice = guage.price,
        this.guageImg = guage.url
        this.guageCount = 1
      },
      buy: _.throttle(async function() {
        if(!this.guageId) {
          this.$toast('请选择规格')
          return
        }
        let data = {
          title: this.detail.title,
          goods_id: this.detail.id,
          guageId: this.guageId,
          guageName: this.guageName,
          price: this.guagePrice,
          num: this.guageCount,
          url: this.guageImg
        }
        this.$store.commit('payGoods', data)
        this.$router.push('/orderConfirmNow')
      }, 2000, { trailing: false }),
      changeCount(data) {
        this.guageCount = data.count
      },
      close() {
        this.$emit('close')
      },
      shopcartAdd: _.throttle(async function() {
        if(!this.guageId) {
          this.$toast('请选择规格')
          return
        }
        let { data: { code, data } } = await this.$axios({
          url: '/v1/cart/increase',
          method: 'POST',
          data: {
            goods_id: this.detail.id,
            num: this.guageCount,
            hao_id: this.guageId,
            openid: this.openId
          }
        })
        if(code == 0) {
          this.$toast(data)
          this.close()
        }
      }, 2000, { trailing: false })
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .dialog {
    position: absolute;
    @include center;
    width: 6.6rem;
    z-index: 6;
    .content {
      padding: 0.2rem;
      background: white;
      border-radius: 5px;
      .goods {
        display: flex;
        padding: 0.1rem 0.2rem;
        background: $bgGray;
        .title {
          flex: 0 0 1rem;
          margin-right:0.2rem;
          width: 1rem;
          height: 1rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .desc {
          flex: 1;
          height: 1rem;
          position: relative;
          h3 {
            font-size: 0.28rem;
            line-height: 0.32rem;
          }
          h5 {
            position: absolute;
            left: 0;
            bottom: 0rem;
            font-size: 0.28rem;
            line-height: 0.28rem;
            color: $colorRed;
          }
        }
      }
      .guage {
        position: relative;
        padding: 0.2rem;
        .title {
          font-size: 0.28rem;
          margin-bottom: 0.1rem;
        }
        .stock {
          position: absolute;
          top: 0.2rem;
          right: 0.2rem;
          color: $colorGray;
        }
      }
      .count {
        display: flex;
        padding: 0.2rem;
        align-items: center;
        .title {
          flex: 1;
          font-size: 0.28rem;
        }
        .ctrl {
          flex: 0 0 1.5rem;
        }
      }
      .btnWrapper {
        display: flex;
        margin-top: 0.2rem;
        padding: 0.2rem;
        div {
          flex: 1;
          padding:0.1rem;
          button {
            display: block;
            width: 100%;
            padding: 0.1rem 0;
            font-size: 0.26rem;
            border-radius: 5px;
            &.shopcart {
              border: 1px solid #979797;
              background: #fff;
            }
            &.buy {
              border: 1px solid $colorRed;
              background: $colorRed;
              color: #fff;
            }
          }
        }
      }
    }
    .close-wrapper {
      padding: 0.3rem;
      text-align: center;
      color: #fff;
      font-size: 0.28rem;
      span {
        display: block;
        margin: 0 auto;
        width: 0.5rem;
        height: 0.5rem;
        line-height: 0.5rem;
        border-radius: 50%;
        border: 2px solid #fff;
        color: #fff;
      }
    }
  }
</style>
